<!-- 我的积分页面 -->
<template>
	<view class="my-integral-container-box">
		<u-sticky>
		<view class="top-container-box">
			<view class="user-box">
				<image class="user-img" :src="'https://static.cqgzd.com/lawyer/lawyer/static/my-icon/bg.png?time=' + new Date().getTime()"></image>
				<view class="ava-integral-box">
					<text>可用积分</text>
					<text class="integral">{{integralTotal || 0}}</text>
				</view>
				<!-- tabs 导航栏 -->
				<view class="tabs-box">
					<u-tabs :list="tabsList" :is-scroll="false" active-color="#00C9B1" height="90" bar-width="130" bar-height="4"></u-tabs>
				</view>
			</view>
		</view>
		</u-sticky>
		<!-- 积分明细 -->
		<view class="integral-detail-box">
			<view class="items-box">
				<block v-if="integralDataList.length < 1">
					<u-empty text="暂无历史记录" mode="history" margin-top="300"></u-empty>
				</block>
				<block v-else>
					<!-- 积分项 -->
					<block v-for="integralItem in integralDataList" :key="integralItem.id">
						<view class="integral-item-box">
							<text>{{ integralItem.type }}</text>
							<view class="time-box">
								<text style="margin-right: 1em;">{{ integralItem.create_time || '' }}</text>
								<!-- <text>{{ integralItem.create_time }}</text> -->
							</view>
							<text class="number">{{ integralItem.num > 0 ? ('+' + integralItem.num) : integralItem.num }}</text>
						</view>
					</block>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 10,
			},
			// tabs 导航栏数据项
			tabsList: [
				{
					name: '积分明细'
				}
			],
			integralTotal: '',	// 总积分
			// 用户积分数据列表
			integralDataList: []
		};
	},
	onLoad() {
		this.getData()
	},
	async onPullDownRefresh() {
		this.sortData.page = 1
		this.integralDataList = []
		await this.getData()
		uni.stopPullDownRefresh()
		this.$u.toast('页面已刷新')
	},
	onReachBottom() {
		this.sortData.page += 1
		this.getData()
	},
	methods: {
		async getData() {
			const res = await this.$u.api.getLawyerScoreChangeList(this.sortData)
			if(!res) return
			this.integralTotal = res.score
			if(res.data.length < 1) return this.sortData.page = this.sortData.page < 2 ? 1 : (this.sortData.page - 1)
			this.integralDataList = [...this.integralDataList, ...res.data]
		}
	}
};
</script>

<style lang="scss" scoped>
.my-integral-container-box {
	// width: 750rpx;
	// min-height: 100vh;
	// background-color: #f4f6fa;
	position: relative;
}
.top-container-box {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	position: fixed;
	.user-box {
		width: 750rpx;
		height: 340rpx;
		padding: 50rpx 22rpx 0 50rpx;
		display: flex;
		position: relative;
		.user-img {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 750rpx;
			height: 340rpx;
			z-index: -1;
		}
		.ava-integral-box {
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			display: flex;
			flex-direction: column;
			.integral {
				font-size: 70rpx;
				font-family: AlibabaPuHuiTi;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
}
.tabs-box {
	width: 700rpx;
	position: absolute;
	bottom: 0;
	left: 25rpx;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
		&::after {
			display: block;
			content: ' ';
			width: 100%;
			height: 1px;
			background-color: #efefef;
		}
	}
.integral-detail-box {
	width: 750rpx;
	min-height: calc(100vh - 340rpx);
	padding-left: 25rpx;
	padding-bottom: 50rpx;
	background-color: #f4f6fa;
	position: absolute;
	top: 340rpx;
	left: 0rpx;
	overflow: hidden;
	z-index: 0;
	.items-box {
		width: 700rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		overflow: hidden;
		.integral-item-box {
			width: 100%;
			height: 120rpx;
			background-color: white;
			padding: 20rpx 45rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			border-bottom: 1px solid #efefef;
			.time-box {
				font-size: 25rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #888888;
			}
			.number {
				position: absolute;
				top: 50%;
				right: 45rpx;
				transform: translateY(-50%);
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #00c9b1;
			}
		}
	}
	
	
}
</style>
